
import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import { Button } from "antd";
import React from "react";
import styles from "./topCards.module.less"
export const TopCards = () => {
    return (
        <div className={styles.topCardsContainer}>
            <div className={styles.imgTitle}><h3>推荐</h3></div>
            <div className={styles.imgListContainer}>
                <div className={styles.ABtn}>
                    <img src="https://pic.leetcode-cn.com/1623736928-IDjvsg-Java%20%E9%9D%A2%E8%AF%95%E7%AA%81%E5%87%BB.jpg?x-oss-process=image%2Fformat%2Cwebp" alt="" />
                </div>
                <div className={styles.ABtn}>
                    <img src="https://pic.leetcode-cn.com/1623725852-wjHteM-%E7%AE%97%E6%B3%95%E4%B8%8E%E9%9D%A2%E8%AF%95%E6%8A%80%E5%B7%A7%E7%B2%BE%E8%AE%B2%EF%BC%88%E5%B0%8F%EF%BC%89.png?x-oss-process=image%2Fformat%2Cwebp" alt="" />
                </div>
                <div className={styles.ABtn}>
                    <img src="https://pic.leetcode-cn.com/1631072932-aldbWv-%E5%B9%B6%E6%9F%A5%E9%9B%86.jpg?x-oss-process=image%2Fformat%2Cwebp" alt="" />
                 </div>
            </div>
            <div className={styles.imgTitle}>
                <h3>学习计划</h3>
                <div>
                    <Button type="link" icon={<LeftOutlined style={{ fontSize:"12px"}} />}></Button>
                    <Button type="link" icon={<RightOutlined style={{ fontSize: "12px" }} />}></Button>
                </div>
            </div>
            <div className={styles.imgListContainer}>
                <div className={styles.ABtn}>
                    <img src="https://pic.leetcode-cn.com/1627640862-HgXcTO-Frame%201444.jpg?x-oss-process=image%2Fformat%2Cwebp" alt="" />
                    <div>20 天「算法」刷题计划</div>
                </div>
                <div className={styles.ABtn}>
                    <img src="https://pic.leetcode-cn.com/1627640875-pWplzE-Frame%201438.jpg?x-oss-process=image%2Fformat%2Cwebp" alt="" />
                    <div>3 周攻克「数据结构」</div>
                </div>
                <div className={styles.ABtn}>
                    <img src="https://pic.leetcode-cn.com/1627640885-gGeALM-Frame%201437.jpg?x-oss-process=image%2Fformat%2Cwebp" alt="" />
                    <div>「动态规划」刷题指南</div>
                </div>
                <div className={styles.ABtn}>
                    <img src="https://pic.leetcode-cn.com/1628144140-BatkPp-Frame%201485%20(1).jpg?x-oss-process=image%2Fformat%2Cwebp" alt="" />
                    <div>剑指 Offer</div>
                </div>
                <div className={styles.ABtn}>
                    <img src="https://pic.leetcode-cn.com/1627641009-euIQrq-Frame%201486%20(1).jpg?x-oss-process=image%2Fformat%2Cwebp" alt="" />
                    <div>程序员面试金典</div>
                </div>
            </div>
        </div>
    )
}